<style scoped>
.recode{
    height: 100%;
    background: #F7F7F7;
}
.contert{
    width: 90%;
    margin: 0 auto;
    font-size: .3rem;
    line-height: 25px;
    padding-top: 10px;
}
.body{
    color:#949494;
    background: #fff;
    padding: 10px 10px;
    border-radius: 4px;
    margin-top: 10px;
}
.dl{
    display: inline-block;
}
.cycle{
    width: .4rem;
    height: .4rem;
    border-radius :50%;
    transform: scale(.5);
    transform-origin: 33% 100%;
}
.tr{
    text-align: right;
}
.hr{
    margin: 5px 0;
    border:none;
    border-bottom:1px solid  #F2F2F2;
}
.w40{
    width: 40%;
}
.w60{
    width: 60%;
}
</style>
<template>
    <div class="recode">
        <div v-wechat-title="$route.meta.title"></div>
        <div class="contert">
            <div class="body">
                <div>
                    <div class="dl" style="width: 70%;">
                        订单号：123434
                    </div>
                    <div class="dl tr" style="color:#F4AC5B;width: 30%;">
                        <span class="dl cycle" style="background:#F4AC5B"></span> 交易中
                    </div>
                    <!-- <div class="dl tr" style="color:#8CD067;width: 30%;">
                        <span class="dl cycle" style="background:#8CD067"></span> 交易成功
                    </div>
                    <div class="dl tr" style="color:#F5554A;width: 30%;">
                        <span class="dl cycle" style="background:#F5554A"></span> 交易失败
                    </div> -->
                </div>
                <hr class="hr"> 
                <div>
                    <div>
                        <div class="dl w60" >
                           交易信用卡：建设银行(2344)
                        </div>
                        <div class="dl tr w40" >
                            2019-12-12  14:23
                        </div>
                    </div>
                    <div>交易金额：20000元</div>
                    <div>
                        <div class="dl w60" >
                           手续费：80.34元
                        </div>
                        <div class="dl tr w40" style="color:#303030;font-size: 13px;">
                            ￥20080.34
                        </div>
                    </div>
                </div>
            </div>
            <div class="body">
                <div>
                    <div class="dl" style="width: 70%;">
                        订单号：123434
                    </div>
                    <!-- <div class="dl tr" style="color:#F4AC5B;width: 30%;">
                        <span class="dl cycle" style="background:#F4AC5B"></span> 交易中
                    </div>
                    <div class="dl tr" style="color:#8CD067;width: 30%;">
                        <span class="dl cycle" style="background:#8CD067"></span> 交易成功
                    </div> -->
                    <div class="dl tr" style="color:#F5554A;width: 30%;">
                        <span class="dl cycle" style="background:#F5554A"></span> 交易失败
                    </div>
                </div>
                <hr class="hr"> 
                <div>
                    <div>
                        <div class="dl w60" >
                           交易信用卡：建设银行(2344)
                        </div>
                        <div class="dl tr w40" >
                            2019-12-12  14:23
                        </div>
                    </div>
                    <div>交易金额：20000元</div>
                    <div>
                        <div class="dl w60" >
                           手续费：80.34元
                        </div>
                        <div class="dl tr w40" style="color:#303030;font-size: 13px;">
                            ￥20080.34
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {}
    },
    created(){

    },
    methods:{

    }
}
</script>